<template>
	<view class="RoomPayMoreContent">
		<view class="titleBox">
			<u-notice-bar mode="horizontal" :text='titleWarning' close-icon='true'></u-notice-bar>
		</view>
		<view class="userListBox">
			<u-row
				justify=""
				v-for="(i,index) in userList"
				customStyle="margin:10rpx 0 10rpx 0">
				<u-col span="2">
					<view class="userInfo">
						<image class="logo" :src="i.url"></image>
					</view>
				</u-col>
				<u-col span="2">
					<view class="userInfo">
						{{i.username}}
					</view>
				</u-col>
				<u-col span="8">
					<view class="">
						<u--input
						    placeholder="请输入数额"
						    border="surround"
						    v-model="paySoloNum"
							type="number"
						    @change="change"
						  >
						  </u--input>
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="btnBox">
			<u-button type="warning">支出</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleWarning:'简易记账仅提供记录，禁止赌博或其它非法行为',
				userList:[
					{
						id:1,
						url:'/static/logo.png',
						username:'周XXX1'
					},
					{
						id:2,
						url:'/static/logo.png',
						username:'周'
					},
					{
						id:3,
						url:'/static/logo.png',
						username:'周'
					},
					{
						id:4,
						url:'/static/logo.png',
						username:'周'
					}
				],
			}
		},
		onReady() {
		},
		onShow() {
		},
		methods: {
		}
	}
</script>

<style lang="scss" scoped>
	.RoomPayMoreContent{
		.userListBox{
			width: 95%;
			margin: auto;
			.userInfo{
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				.logo{
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}
			}
		}
		.btnBox{
			width: 95%;
			margin: auto;
		}
	}
</style>